<template>
    <div class="map">
        <el-dialog
            id="wrap"
			class="sys-admin-dialog"
			width="70%" 
			:visible="visible"
			@close="dialogClose"
		    >
            <div id="searchWrap">
                <div class="searchWrap">
                <input type="text" v-model="address" @input="search" />
                <button @click="search">搜索</button>
                </div>
                <div id="result" class="amap_lib_placeSearch" v-show="hide">
                <div
                    class="amap_lib_placeSearch_list amap-pl-pc"
                    v-for="(item,index) in poiArr"
                    @click="openMarkerTipById(index,$event)"
                    @mouseout="onmouseout_MarkerStyle(index+1,$event)"
                    :key="index"
                >
                    <div class="poibox" style="border-bottom: 1px solid #eaeaea">
                    <div
                        class="amap_lib_placeSearch_poi poibox-icon"
                        :class="index==selectedIndex?'selected':''"
                    >{{index+1}}</div>
                    <div
                        class="poi-img"
                        v-if="item.url"
                        :style="'background-image:url('+item.url+'?operate=merge&amp;w=90&amp;h=56&amp;position=5)'"
                    ></div>
                    <h3 class="poi-title">
                        <span class="poi-name">{{item.name}}</span>
                    </h3>
                    <div class="poi-info">
                        <p class="poi-addr">地址：{{item.address}}</p>
                        <p class="poi-tel">电话：{{item.tel}}</p>
                    </div>
                    <div class="clear"></div>
                    </div>
                </div>
                </div>
            </div>
            <div id="iCenter"></div>
            <button class="btn" @click="fetAddressName">获取当前位置和名字</button>
        </el-dialog>
  </div>
</template>

<script>
export default {
  name: "mapDialog",
  props: [ 'visible' ],
  data() {
    return {
      address: this.newAddress ? this.newAddress : "火焰顶", //保存地址的汉字名字
      map1: "",
      map: "", //保存地址的经纬度
      poiArr: [], //左边搜索出来的数组
      windowsArr: [], //信息窗口的数组
      marker: [],
      mapObj: "", //地图对象
      selectedIndex: -1,
      hide: false,
      clickType: 1,
      location: {
        P: "122.0277",
        Q: "37.4536"
      }
    }
  },
  mounted() {
    this.mapInit();
    this.placeSearch(this.address);
  },
  methods: {
    dialogClose () {
        this.$emit('cancel')
    },
    fetAddressName() {},
    showToast(address) {
      this.placeSearch(address.address);
      console.log(444, address);
      this.location.P = address.lat;
      this.location.Q = address.lng;
      this.address = address.address;
      let that = this;
      new AMap.InfoWindow({
        content: "<h3>" + "当前选中地址" + "</h3>" + that.address,
        size: new AMap.Size(300, 0),
        autoMove: true,
        offset: new AMap.Pixel(-4, -10)
      }).open(that.mapObj, that.location);
    },
    cancelSave() {
      eventBus.$emit("cancelSave");
    },
    saveAddress() {
      let addressName, location;
      if (this.clickType == 1) {
        let address = this.poiArr[this.selectedIndex];
        addressName = address.name + address.address;
        location = address.location;
        console.log(address.name + address.address, address.location);
      } else if (this.clickType == 2) {
        console.log(this.address, this.map);
        addressName = this.address;
        location = this.map;
      } else if (this.clickType == 3) {
        console.log(this.address, this.map1);
        addressName = this.address;
        location = this.map1;
      }
      eventBus.$emit("saveAddress", [addressName, location]);
    },
    // 经纬度转化为详细地址
    getAddress() {
      let that = this;
      AMap.plugin("AMap.Geocoder", function() {
        let geocoder = new AMap.Geocoder({
          radius: 100,
          extensions: "all"
        });
        geocoder.getAddress([that.map1.lng, that.map1.lat], function(
          status,
          result
        ) {
          if (status === "complete" && result.info === "OK") {
            let address = result.regeocode.formattedAddress;
            console.log(result.regeocode);
            that.address = result.regeocode.formattedAddress;
            // that.placeSearch(that.address)
          }
        });
      });
    },
    // 地图点击事件
    testevent() {
      let that = this;
      this.clickType = 3;
      // var map=new AMap.Map('iCenter');//重新new出一个对象，传入参数是div的id
      AMap.event.addListener(this.mapObj, "click", function(e) {
        //添加点击事件,传入对象名，事件名，回调函数
        that.map1 = e.lnglat;
        that.getAddress();
        setTimeout(() => {
          new AMap.InfoWindow({
            content: "<h3>" + "当前选中地址" + "</h3>" + that.address,
            size: new AMap.Size(300, 0),
            autoMove: true,
            offset: new AMap.Pixel(-4, -10)
          }).open(that.mapObj, e.lnglat);
        }, 100);
      });
    },
    //创建一个map
    mapInit() {
      this.mapObj = new AMap.Map("iCenter", {
        resizeEnable: true,
        zoom: 10
      });
      this.testevent();
    },
    //根据名字地址去搜索结果
    placeSearch(name) {
      let that = this;
      this.hide = true;
      var MSearch;
      this.mapObj.plugin(
        ["AMap.PlaceSearch", "AMap.ToolBar", "AMap.Scale"],
        () => {
          this.mapObj.addControl(new AMap.ToolBar());
          this.mapObj.addControl(new AMap.Scale());
          MSearch = new AMap.PlaceSearch({
            //构造地点查询类
            city: that.address //城市
          });
          AMap.event.addListener(
            MSearch,
            "complete",
            this.keywordSearch_CallBack
          ); //返回地点查询结果
          MSearch.search(name); //关键字查询
        }
      );
    },
    //结果的回调
    keywordSearch_CallBack(data) {
      var poiArr = data.poiList.pois;
      var resultCount = poiArr.length;
      this.poiArr = poiArr; //左边要渲染的数据
      for (var i = 0; i < resultCount; i++) {
        this.addmarker(i, poiArr[i]);
        console.log(poiArr[i]);
        this.poiArr[i].url = this.poiArr[i].photos
          ? this.poiArr[i].photos[0]
            ? this.poiArr[i].photos[0].url
            : ""
          : "";
      }
      this.mapObj.setFitView();
    },
    //添加marker&infowindow
    addmarker(i, d) {
      var lngX = d.location.getLng();
      var latY = d.location.getLat();
      console.log(lngX, latY);
      var markerOption = {
        map: this.mapObj,
        position: new AMap.LngLat(lngX, latY)
      };
      var mar = new AMap.Marker(markerOption);
      this.marker.push(new AMap.LngLat(lngX, latY));
      var infoWindow = new AMap.InfoWindow({
        content:
          "<h3>" +
          "当前选中位置：" +
          d.name +
          "</h3>" +
          this.TipContents(d.name, d.address),
        size: new AMap.Size(300, 0),
        autoMove: true,
        offset: new AMap.Pixel(0, -30)
      });
      console.log();
      this.windowsArr.push(infoWindow);
      var _this = this;
      var aa = e => {
        this.clickType = 2;
        var obj = mar.getPosition();
        this.map = obj; //这里保存的地址经纬度
        this.address = d.name + d.address; //这里保存的是地址名字
        infoWindow.open(_this.mapObj, obj);
      };
      AMap.event.addListener(mar, "click", aa);
    },
    TipContents(name, address) {
      //窗体内容
      if (
        name == "" ||
        name == "undefined" ||
        name == null ||
        name == " undefined" ||
        typeof name == "undefined"
      ) {
        type = "暂无";
      }
      if (
        address == "" ||
        address == "undefined" ||
        address == null ||
        address == " undefined" ||
        typeof address == "undefined"
      ) {
        address = "暂无";
      }
      var str = `地址：${address}`;
      return str;
    },
    openMarkerTipById(pointid, event) {
      //根据id 打开搜索结果点tip
      this.clickType = 1;
      event.currentTarget.style.background = "#CAE1FF";
      this.selectedIndex = pointid;
      // this.map = this.marker[pointid]
      this.map1 = this.poiArr[pointid].location;
      console.log(222, this.mapObj, this.marker[pointid]);
      console.log(this.marker[pointid], this.poiArr[pointid]);
      this.address = this.poiArr[pointid].address + this.poiArr[pointid].name;
      this.windowsArr[pointid].open(this.mapObj, this.marker[pointid]);
    },
    onmouseout_MarkerStyle(pointid, event) {
      //鼠标移开后点样式恢复
      event.currentTarget.style.background = "";
    },
    search() {
      this.windowsArr = [];
      this.marker = [];

      this.mapObj = "";
      this.mapInit();
      this.placeSearch(this.address);
    }
  }
};
</script>

<style scoped lang="scss">
#wrap{
        width:100%;
        display: flex;
        #iCenter {
            height: 600px;
            position: relative;
            display: flex;
            flex: 1;
        }
        #searchWrap{
            width:300px;
            position: relative;
            height:600px;
            .searchWrap{
                position: absolute;
                width:300px;
                z-index: 9;
                display: flex;
                align-items: center;
                input{
                    width:260px;
                    height:24px;
                }
                button{
                    width:36px;
                    height:28px;
                }
            }
            #result {
                width: 300px;
                position: absolute;
                top:30px;
                height: 570px;
                z-index: 8;
                overflow-y: scroll;
                border-right: 1px solid #ccc;
            }
        }
        .amap_lib_placeSearch {
            height: 100%;
            overflow-y: scroll;
            .poibox {
                border-bottom: 1px solid #eaeaea;
                cursor: pointer;
                padding: 5px 0 5px 10px;
                position: relative;
                min-height: 35px;
                .selected {
                    background-image: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png) !important;
                }
                &:hover {
                    background: #f6f6f6;
                }
                .poi-img {
                    float: right;
                    margin: 3px 8px 0;
                    width: 90px;
                    height: 56px;
                    overflow: hidden;
                }
                .poi-title {
                    margin-left: 25px;
                    font-size: 13px;
                    overflow: hidden;
                }
                .poi-info {
                    word-break: break-all;
                    margin: 0 0 0 25px;
                    overflow: hidden;
                    p {
                        color: #999;
                        font-family: Tahoma;
                        line-height: 20px;
                        font-size: 12px;
                    }
                }
                .poibox-icon {
                    margin-left: 7px;
                    margin-top: 4px;
                }
                .amap_lib_placeSearch_poi {
                    background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png)
                    no-repeat;
                    height: 31px;
                    width: 19px;
                    cursor: pointer;
                    left: -1px;
                    text-align: center;
                    color: #fff;
                    font: 12px arial, simsun, sans-serif;
                    padding-top: 3px;
                    position: absolute;
                }
            }
        }
        .btn{
            position: fixed;
            bottom:20px;
            left:50%;
            padding:10px;
        }
    }
</style>